<template>
    <view class="min100 bg container">
        <view class="">
            <!-- 头部 -->
            <view class="topWrap">
                <img :src="status==1?bgImg:img_gif" class="collectImg" :style="activeWidth">
                <view class="text-center topContent">
                </view>
            </view>
            <view class="radius-20 bg plr-30 ptb-30">
                <view class="mb-30 size-30">
                    游戏规则
                </view>
                <view class=" infoWrap" v-html="info.content">

                </view>
            </view>
        </view>
        <view class="miningState">
            <view class="miningBtn">
                <view class="Recording" @click="miningRecord">游戏记录</view>
                <view class="Recording" @click="rankList">游戏排行榜</view>
                <view class="endBtn">
                    <view class="" v-if="status==1" @click="start">开始游戏</view>
                    <view class="" v-if="status==2" @click="final">结束游戏</view>
                </view>
            </view>
        </view>
        <!-- 挖矿 -->
        <u-popup  v-model="popshow" mode="center" :closeable="true" border-radius="14" length="70%">
            <view class="miningBg">
                <image src="../../static/home/wakuang.gif" mode="widthFix"></image>
            </view>
        </u-popup>
        <!-- 挖矿结果 -->
        <u-popup  v-model="popshow1" mode="center" :closeable="true" border-radius="14" length="70%">
            <view class="miningBg">
                <image style="width: 60%;" v-if="WinningStatus==1" src="../../static/home/kuangshi.png" mode="widthFix"></image>
                <image style="width: 60%;" v-else src="../../static/home/none.png" mode="widthFix"></image>
            </view>
            <view class="center">
                <view class="center congratulate" v-if="WinningStatus==1">恭喜你挖掘出了xx矿X2</view>
                <view class="center congratulate" v-else>什么都没挖到，再试试吧</view>
            </view>
            <view class="center">
                <view class="center chargeBtn" v-if="WinningStatus==1" @click="popshow1=false">立即收取</view>
                <view class="center chargeBtn" v-else @click="popshow1=false">确认</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import empty from "../../components/empty.vue"
export default {
    components: {
        empty
    },
    data() {
        return {
            activeWidth:{
                'width': '40%',
                'left': '30%',
                'top':'48%'
            },
            bgImg:'',
            img_gif:'',
            timer: '',
            popshow: false,
            popshow1: false,
            timestamp: 40532,
            gifUrl: "../../static/open.gif",
            gifShow: false, //盲盒动图
            preShow: false,
            changeShow: false,
            afterPrice: '',
            id: '',
            box_id: '',
            transferPhone: '',
            transferShow: false,
            openfig: {},
            newOpenfig: [],
            openPop: false,
            openPop1: false,
            salePrice: '',
            saleShow: false,
            info: {
                goods: []
            },
            is_trade: 0,
            saleConfig: {},
            terracePrice: 0,
            authorPrice: 0,
            payPrice: 0,
            realPrice: 0,
            status: 1,
            winningPrize:'',
            WinningStatus:''
        }
    },
    onLoad(options) {
        if(!options.id){
            this.id = 1
            uni.setNavigationBarTitle({
                title:'气运矿场'
            })
        }else{
            this.id = options.id;
            uni.setNavigationBarTitle({
                title:options.name
            })
        }
        this.init();
        this.$http('api/login/helpContent').then(res => {
            this.is_trade = res.is_trade;
            this.img_gif = res.img_gif;
        })
        this.$http('api/index/fee').then(res => {
            this.saleConfig = res;
        })
    },
    onBackPress() {
        //返回清除计时器
        this.final()

    },
    methods: {
        // 终止挖矿
        final(){
            clearTimeout(this.timer)
            this.status=1
            // this.bgImg=this.info.notfound_image
            // this.activeWidth={
            // 	'width': '20%',
            // 	'left': '40%'
            // }
        },
        // 开始挖矿
        start(){
            console.log('开始挖矿')
            // this.popshow=true


            if(this.info.user_total_count-this.info.today_count>0){
                this.bgImg=this.info.in_process_image
                this.activeWidth={
                    'width': '40%',
                    'left': '37%'
                }
                this.status=2
                this.timer=setTimeout(()=>{
                    console.log('终止')
                    console.log('挖矿结束')
                    this.$http('api/forge_task/task', {
                        id: this.id
                    }).then(res => {
                        console.log(res)
                        this.activeWidth={
                            'width': '40%',
                            'left': '37%'
                        }
                        if(res.status==0){
                            this.bgImg=this.info.notfound_image
                            uni.showToast({
                                icon:"none",
                                image: res.image,
                                title:'什么都没挖到，再试试吧'
                            })
                        }else{
                            this.bgImg=this.info.reward_image
                            uni.showToast({
                                icon:"none",
                                image: res.image,
                                title: '恭喜你挖掘出了'+res.name
                            })
                        }
                        // this.popshow=false
                        // this.popshow1 = true
                        this.winningPrize=res
                        this.WinningStatus = res.status
                        // this.status=1

                        this.start()
                    })

                },1000*this.info.time_interval)
            }else{
                uni.showToast({
                    icon:"none",
                    title:'今日挖矿次数已用完'
                })
            }
        },
        closeOpen() {
            this.openPop = false;
            this.openPop1 = false;
            uni.navigateTo({
                url: './myBox?type=' + 6
            })
        },
        miningRecord(){
            uni.navigateTo({
                url:'./miningRecord?id='+this.id
            })
        },
        rankList(){
            uni.navigateTo({
                url:'./rankList?id='+this.id
            })
        },
        init() {
            this.$http('api/forge_task/taskDetail', {
                id: this.id
            }).then(res => {

                this.info = res[0];
                this.box_id=this.info.id
                this.bgImg=this.info.in_process_image
                console.log(this.info.time_interval)
            })
        },

    }
}
</script>

<style lang="less" scoped>
.container{
    background: linear-gradient(to bottom,#E2DFFE,#FFFFFF);
    position: relative;
    .miningBg{
        text-align: center;
        image{
            width: 80%;
            margin: 0 auto;
        }
    }
    .congratulate{
        color: #A87A4E;
        font-weight: bold;
        font-size: 34rpx;
    }
    .chargeBtn{
        width: 260rpx;
        margin: 40rpx auto;
        height: 80rpx;
        border-radius: 20rpx;
        background: linear-gradient(to left,#2A2A2A,#585858);
        line-height: 80rpx;
        color: #fff;
    }
    .miningState{
        width: 100%;
        // height: 400rpx;
        border-radius: 24rpx 24rpx 0 0;
        background-color: #fff;
        text-align: center;
        position: absolute;
        bottom: 0;
        padding: 0 10%;
        box-sizing: border-box;
        padding: 40rpx 0 40rpx;
        image{
            width: 120rpx;
            height: 120rpx;
            margin-top: 40rpx;
        }
        .state{
            display: flex;
            justify-content: center;
            margin: 40rpx 0;
            color: #1690FD;
            ::v-deep  .u-countdown-time{
                color: #1690FD !important;
            }
            ::v-deep  .u-countdown-colon{
                color: #1690FD !important;
            }
        }
        .miningBtn{
            display: flex;
            justify-content: space-around;
            .endBtn{
                view{
                    width: 100%;
                    background: linear-gradient(to left,#2A2A2A,#585858);
                    color: #fff;
                }

            }
            view{
                width: 30%;
                height: 80rpx;
                border-radius: 20rpx;
                line-height: 80rpx;
                border: 1rpx solid #2A2A2A;
                color: #333333;
            }
        }
    }
}
.userImg {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
}


.btmWrap {
    position: fixed;
    z-index: 10;
    width: 100%;
    bottom: 0;
    background: #fff;

    uni-button {
        width: 30%;
        height: 80rpx;
        border-radius: 25rpx;
        font-size: 24rpx;
        line-height: 80rpx;
    }

    .transBtn {
        color: #fff;
        background: linear-gradient(to right,#585858,#2A2A2A);
    }

    .saleBtn {
        color: #333333;
        background: transparent;
        border: 1rpx solid #2A2A2A;
    }
}

.buyBtn {
    font-size: 28rpx;
    color: #040404;
    line-height: 80rpx;
    height: 80rpx;
    background: #44ACFF;
    border-radius: 40rpx;
    width: 210rpx;
}

.tipsLeft {
    background: rgb(42,42,42);
    color: #fff;
    border-radius: 24rpx 0 0 24rpx;
    border: 1rpx solid rgb(42,42,42);
}
.tipsRight{
    border-radius:0 24rpx 24rpx 0;
    width:116rpx;
    // padding: 0rpx 20rpx;
    border: 1rpx solid rgb(42,42,42);
    color: #000;
}
.collectImg {
    // width: 60%;
    display: block;
    margin: 0 auto;
    height: auto;
    position: absolute;
    bottom: 20%;
    // left: 20%;
    // border: 20rpx solid #fff;
    // border-radius: 20rpx;
}
.openBtn{
    width: 50%;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 20rpx;
    margin: 0 auto;
    color: #fff;
    letter-spacing: 3rpx;
    margin-top: 40rpx;
    background: linear-gradient(to right,#585858,#2A2A2A);
}
.topWrap {
    background: url(../../static/img/wabgpic.jpg) 0 0 no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 926rpx;
    padding-top: 120rpx;
    position: relative;
}

.infoWrap {
    ::v-deep  img {
        width: 100% !important;
        height: auto;
    }
}

.itemTips {
    font-size: 28rpx;
    background: #DEE4E8 !important;
    border-radius: 40rpx;
}

.popWrap ,.popBlindBox{
    background: url(../../static/openImg.png) 0 0 no-repeat;
    background-size: 100% 100%;
    width: 500rpx;
    height: 526rpx;
    padding-top: 128rpx;
    position: relative;

    .openImg {
        width: 240rpx;
        height: 240rpx;
        background: #666;
    }
}
.popBlindBox{
    // width: 500rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-right: 20px;
    padding-left: 20px;
    .popItem{
        width: 30%;
        .openImg {
            width: 120rpx;
            height: 120rpx;
            background: #666;
        }
    }
}
.openGif {
    width: 500rpx;
    height: 500rpx;
    margin: 400rpx auto 0;

    .gifImg {
        width: 500rpx;
        height: 500rpx;
    }
}

.closeIcon {
    width: 60rpx;
    height: 60rpx;
    margin: 30rpx auto;
    display: block;
}

.openWrap {
    ::v-deep  .u-mode-center-box {
        background-color: transparent;
    }
}

.topContent {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 120rpx;
    z-index: 10;
    width: 100%;
    text-align: center;
}
</style>
